<template>
    <div class="box">
        <van-image width="100%" height="250" :src="rew.imgUrl" />
        <div class="header">
            <ul class="hed_list">
                <li>
                    <h1>{{ rew.name }}</h1>
                </li>
                <li>
                    <van-row class="yx">
                        <van-col span="5">月销：{{ rew.sellCount }}</van-col>
                        <van-col span="10" offset="1">好评率：{{ rew.rating }}</van-col>
                    </van-row>
                </li>
                <li>
                    <van-row>
                        <van-col span="5" class="pirce">{{ rew.price }}</van-col>
                        <van-col span="10" class="ct">{{ rew.sellCount }}</van-col>
                        <van-col span="6">
                            <van-button icon="cart-o" type="warning" class="boder">加入购物车</van-button>
                        </van-col>
                    </van-row>

                </li>
                <li></li>
            </ul>


        </div>
        <div class="content">
            <ul>
                <li>商品介绍</li>
                <li>{{ rew.goodsDesc }}</li>
            </ul>
        </div>
        <div class="footer">
            <van-tabs v-model:active="activeIndex">
                <van-tab title="全部90" >
                    <ul  class="cont" v-for="(item, index) in rew.ratings" :key="index">
                        <li>{{ rew.ctime }}</li>
                        <li>{{ item.username }} 
                        <van-image round width="2rem" height="2rem"
                                :src="item.avatar" />
                           
                        </li>
                        <li>  <div>{{item.text}}</div></li>

                    </ul>
                 

                </van-tab>
                <van-tab title="推荐69">内容 2</van-tab>
                <van-tab title="吐槽24">内容 3</van-tab>
            </van-tabs>

        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { GoodTwo } from '../../api/model/goods';
import { GoodsEntity } from '../home/goods';
export default defineComponent({
    setup() {
        const dataScour = reactive(new GoodsEntity());
        const route = useRoute();
        let foods:GoodTwo |any=route.query.id;
        let rew = JSON.parse(foods);
        onMounted(() => {

            console.log(rew);

        })
        const queryGood = () => {

        }
        const activeIndex = ref(0);

        return { ...toRefs(dataScour), rew, activeIndex }
    }
})
</script>

<style lang="scss" scoped>
.box {
    height: 100%;
    background-color: #ddd;
    overflow: scroll;
}

.header {
    height: 110px;
    border: 1px solid;
    background-color: #fff;
    overflow: scroll;

    h1 {
        font-weight: 700;
    }

    .yx {
        font-size: 12px;
        color: #ddd;
    }

    .hed_list {
        margin-left: 10px;

        li {
            margin-top: 10px;
        }
    }

    .pirce {
        color: #D84407;
        font-size: 22px;
        font-weight: 600;
    }

    .ct {
        text-decoration: line-through;
        color: #ddd;

    }

    .boder {
        color: black;
        width: 130px;
        border-radius: 44px;
    }
}

.content {
    height: 100px;
    border: 1px solid;
    margin-top: 20px;
    background-color: #fff;
    overflow: scroll;

    ul {
        margin-left: 10px;

        li:nth-child(1) {
            margin: 10px 0;
            font-size: 20px;
        }
    }
}

.footer {
    height: calc(100% - 210px);
    border: 1px solid red;
    overflow: scroll;
    margin-top: 20px;
    background-color: white;

    .cont {
        margin-top: 20px;
        margin-left: 10px;
        li:nth-child(2){
            margin-top: -25px;
            margin-left: 280px;
        }
    }
}
</style>